

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ip列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
  </head>

<body>
  <div class="layui-fluid" id="LAY-component-grid-stack">
    <div class="layui-card">

      <div class="layui-card-header">
            <span class="layui-breadcrumb" lay-separator="—">
              <a href="javascript:;">{$lib.title}</a>
            </span>
      </div>

        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
          <div class="layui-form-item">

            <div class="layui-inline">
              <button class="layui-btn layuiadmin-btn-admin layui-btn-primary" type="button" onclick="history.back();">
                <i class="layui-icon layui-icon-return layuiadmin-button-btn"></i>返回
              </button>
            </div>

            <div class="layui-inline">
              <input type="text" name="ip" placeholder="输入ip" autocomplete="off" class="layui-input" value="{$Request.param.ip}">
            </div>


          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
          </div>
        </div>
      <div class="layui-card-body">

        <script type="text/html" id="toolbarDemo">
          <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
          </div>
        </script>

        <table id="LAY-user-back-role" lay-filter="LAY-user-back-role"></table>
        <script type="text/html" id="table-useradmin-admin">
          <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete" ></i></a>
        </script>
      </div>
    </div>

  </div>

  <script src="/static/layuiadmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
    }).use(['index','table'], function () {
      var $ = layui.$
              ,admin = layui.admin
              ,table = layui.table
              ,form = layui.form;

      //监听搜索
      form.on('submit(LAY-user-back-search)', function(data){
        var field = data.field;
        //执行重载
        table.reload('LAY-user-back-role', {
          where: field
          ,page: {
            curr: 1  // 将页码重置为第一页
          }
        });
      });

      table.render({
        elem: '#LAY-user-back-role'
        , url: '/quick_app/libIps?lib_id={$lib.id}' //模拟接口
        , response: {
          statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
        }
        , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        , defaultToolbar: false
        , page: true //开启分页
        , limit: 20
        , cols: [[
          {field: 'id', width: 80, title: 'id'}
          ,{field: 'ip', title: 'ip'}
          ,{field: 'create_time', title: '创建时间'}
          , {title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}
        ]]
      });

      //头工具栏事件
      table.on('toolbar(LAY-user-back-role)', function (obj) {
        switch (obj.event) {
          case 'add':
            layer.prompt({title: '添加ip，多个ip半角逗号分割', formType: 2}, function(text, index){
              $res = validateIP(text);
              if (!$res){
                layer.msg('请输入正确格式的IP地址');
                return false;
              }
              var loadIndex = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
              admin.req({
                url: '/quick_app/addLibIp'
                , type: "POST"
                , data: {'ips': text, 'lib_id': '{$lib.id}'}
                , done: function (res) {
                  layer.msg(res.msg, {icon: 1, time: 2000}, function () {
                    layer.close(loadIndex);
                    layer.close(index); //关闭弹层
                    table.reload('LAY-user-back-role');
                  });
                }, not_finish: function (res) {
                  layer.close(loadIndex);
                  layer.msg(res.msg);
                }
              });
            });
            break;
        }
      });


      function validateIP(str) {
        // IP地址的正则表达式
        const ipRegex = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
        // 多个IP地址以半角逗号分割的正则表达式
        const multiIpRegex = /^((?:[0-9]{1,3}\.){3}[0-9]{1,3},)*((?:[0-9]{1,3}\.){3}[0-9]{1,3})$/;
        if (ipRegex.test(str)) {
          return true;
        } else if (multiIpRegex.test(str)) {
          return true;
        } else {
          return false;
        }
      }




      //监听工具条
      table.on('tool(LAY-user-back-role)', function(obj){
        var data = obj.data;
        if (obj.event === 'del'){
          layer.confirm('确认删除'+obj.data.ip, {icon: 3, title:false}, function(index){
            admin.req({
              url: '/quick_app/delLibIp'
              , type: "POST"
              , data: {'id': obj.data.id}
              , done: function (res) {
                layer.msg('删除成功', {icon: 1, time: 1000}, function () {
                  obj.del();
                  layer.close(index);
                });
              },not_finish:function (res) {
                layer.msg(res.msg);
              }
            });
          });
        }
      });

    });
  </script>
</body>